<template>
  <div class="page index">
    <div class="title">
      <span class="text">{{ title }}</span>
    </div>
    <div class="logo">
      <img class="logo-1" src="@/assets/images/logo1.png" alt=""/>
      <img class="logo-2" src="@/assets/images/logo2.png" alt=""/>
      <img class="logo-3" src="@/assets/images/logo3.png" alt=""/>
      <img class="logo-4" src="@/assets/images/logo4.png" alt=""/>
    </div>
    <div class="left-menu menu-block">
      <div @click="$router.push(item.url)" class="menu-item" v-for="item in leftMenu" :key="item.id">
        <div class="menu-text">
          <div class="menu-title">{{ item.name }}</div>
          <div class="menu-sub-title">{{ item.sub }}</div>
        </div>
        <img :src="item.icon" class="menu-icon" alt=""/>
      </div>
    </div>
    <div class="right-menu menu-block">
      <div @click="$router.push(item.url)" class="menu-item" v-for="item in rightMenu" :key="item.id">
        <img :src="item.icon" class="menu-icon" alt=""/>
        <div class="menu-text">
          <div class="menu-title">{{ item.name }}</div>
          <div class="menu-sub-title">{{ item.sub }}</div>
        </div>
      </div>
    </div>
    <div class="btn">网上调解室</div>
  </div>
</template>
<script>
import getPageTitle from '@/utils/get-page-title'

export default {
  data() {
    return {
      title:getPageTitle(),
      leftMenu: [
        {
          id: 1,
          name: '基础数据中心',
          sub: 'Date Center',
          icon: require('@/assets/images/index-icon-1.png'),
          url:'/home'
        },
        {
          id: 2,
          name: '矛盾纠纷调解',
          sub: 'Mediation Work',
          icon: require('@/assets/images/index-icon-2.png'),
          url:'/adjust'
        },
        {
          id: 3,
          name: '综治中心队伍',
          sub: 'Professional Team Building',
          icon: require('@/assets/images/index-icon-3.png'),
          url:'/building'
        },
      ],
      rightMenu: [
        {
          id: 1,
          name: '综治服务中心',
          sub: 'Comprehensive Management Center',
          icon: require('@/assets/images/index-icon-4.png'),
          // url:'/follow'
          url:'/management'
        },
        {
          id: 2,
          name: '道德法治宣防',
          sub: 'Moral and Legal Awareness and Prevention',
          icon: require('@/assets/images/index-icon-5.png'),
          url:'/morality'
        },
        {
          id: 3,
          name: 'Deepseek 法律AI讲堂',
          sub: 'Deepseek Legal AI Lecture Hall',
          icon: require('@/assets/images/index-icon-6.png'),
          url:'/lecture'
        },
      ]
    }
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
.page.index {
  position: relative;
  overflow: hidden;
  background: url("~@/assets/images/index-background.png") no-repeat center;
  background-size: 100% 100%;

  .title {
    position: absolute;
    transform: translate(-50%,0);
    top: 120px;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    width: 1600px;
    .text{
      font-size: 74px;
      font-weight: bold;
      color: #29F1FA;
      text-shadow: #296bfa 0 0 10px;
      font-family: 冷酷体;
    }
  }

  $menuWidth: 800px;
  $menuHorizontalOffset: 25%;

  .menu-block {
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 52%;

    .menu-item {
      display: flex;
      align-items: center;
      width: $menuWidth;
      height: 120px;
      $menuIconSize: 55px;
      cursor: pointer;

      .menu-icon {
        width: $menuIconSize;
        height: $menuIconSize;
      }

      .menu-text {
        display: flex;
        flex-direction: column;
        color: #8ACAF6;
        .menu-title {
          margin-bottom: 10px;
          font-size: 28px;
        }

        .menu-sub-title {
          font-size: 16px;
        }
      }
    }
  }

  $menuPadding: 280px;
  $menuPaddingMid: 280px;

  .left-menu {
    left: $menuHorizontalOffset;

    .menu-item {
      background-image: linear-gradient(to left, #034683, rgba(0, 0, 0, 0));
      justify-content: flex-end;
      padding-right: $menuPadding;

      .menu-text {
        align-items: flex-end;
        margin-right: 20px;
      }
    }

    .menu-item:nth-child(2) {
      padding-right: $menuPaddingMid;
    }
  }

  .right-menu {
    right: calc($menuHorizontalOffset - $menuWidth);

    .menu-item {
      justify-content: flex-start;
      padding-left: $menuPadding;
      $menuIconSize: 60px;
      background-image: linear-gradient(to right, #034683, rgba(0, 0, 0, 0));
      .menu-text {
        margin-left: 20px;
      }
    }

    .menu-item:nth-child(2) {
      padding-left: $menuPaddingMid;
    }
  }

  $logoSize:600px;

  .logo {
    background: rgba(1, 7, 84, 0.9);
    z-index: 1;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 52%;
    left: 50%;
    width: $logoSize;
    height: $logoSize;
    border-radius: 50%;

    img {
      z-index: 3;
      position: absolute;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 50%;
    }

    .logo-1 {
      width: 75%;
      left: 47%;
    }

    .logo-2 {
      width: 69%;
      animation: clockwise 8s linear infinite;
    }

    .logo-3 {
      width: calc(92% - 13px);
      animation: counterclockwise 10s linear infinite;
    }

    .logo-4 {
      width: 100%;
      animation: clockwise 12s linear infinite;
    }

    @keyframes clockwise {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }
    @keyframes counterclockwise {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(-360deg);
      }
    }
  }
  .btn{
    position: absolute;
    bottom: 50px;
    left: 45%;
    width: 200px;
    background: #154a8f;
    height: 50px;
    border-radius: 40px;
    border: 1px solid #22dfe9;
    color: #22dfe9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
  }
}
</style>
